<template>
  <ul class="head-nav flex-around" :class="{'not-home-nav':notHome}">
    <li v-for="(item,index) in dataList" :key="index" class="flex-center-stright">
      <div class="title flex-center">
        <div class="nav-trans" @click="linkTo(item)">
          <span
            :data-title="item.title"
            :class="{'active-y':nowPath===item.route&&item.route==='/home','active-b':includeRoute(nowPath,item)&&item.route!=='/home'}"
          >{{item.title}}</span>
        </div>
        <i class="iconfont iconiconfontarrows" v-if="item.list"></i>
      </div>
      <div class="sec-nav" v-if="item.list">
        <p
          v-for="(sec,secind) in item.list"
          :key="secind"
          @click="linkTo(sec)"
          :class="{'active-b':nowPath===sec.route}"
        >{{sec.title}}</p>
      </div>
      <div class="line"></div>
    </li>
  </ul>
</template>
<script>
export default {
  props: ["notHome"],
  computed: {
    nowPath() {
      return this.$route.path;
    },
    dataList() {
      return [
        {
          title: this.$t("nav.home"),
          route: "/home"
        },
        {
          title: this.$t("nav.block"),
          list: [
            {
              title: this.$t("nav.viewblock"),
              route: "/block"
            },
            {
              title: this.$t("nav.viewtx"),
              route: "/tradelist"
            }
          ]
        },
        {
          title: this.$t("nav.token"),
          route: "/token"
        },
        {
          title: `${process.env.VUE_APP_BASECOIN}${this.$t("nav.rank")}`,
          route: "/mainHolder"
        },
        {
          title: this.$t("nav.tool"),
          list: [
            {
              title: this.$t("nav.analysis"),
              route: "/alytx"
            },
            {
              title: this.$t("nav.broadcast"),
              route: "/broadtx"
            }
          ]
        }
      ];
    }
  },
  methods: {
    linkTo(url) {
      console.log(url);
      if (url.route) this.$router.push(url.route);
      else if (url.href) window.open(url.href);
      else return;
    },
    includeRoute(path, route) {
      return JSON.stringify(route).includes(String(path));
    }
  }
};
</script>


<style lang="scss" scoped>
.head-nav {
  li {
    z-index: 100;
    position: relative;
    height: 70px;
    cursor: pointer;
    .nav-trans {
      // display: inline-block;
      overflow: hidden;
      position: relative;
      height: 30px;
    }
    i {
      line-height: 30px;
      transition: 0.3s;
      margin-left: 5px;
      font-size: 5px;
    }
    span {
      height: 30px;
      line-height: 30px;
      transition: all ease-out 0.3s;
      display: inline-block;
      // position: absolute;
      // right: 22%;
    }
    span:after {
      display: inline-flex;
      position: absolute;
      left: 0;
      content: attr(data-title);
      transform: translateY(100%);
    }
  }
  li:hover {
    span,
    i {
      color: $yellow;
    }
    span {
      transform: translateY(-100%);
    }
    .sec-nav {
      display: block;
    }
  }
  .active-y {
    color: $yellow;
  }
  .active-b {
    color: $blue;
  }
  .sec-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: -30px;
    background: $nav_bg;
    padding: 13px 0;
    width: max-content;
    min-width: 104px;
    transition: 0.3s;
    p {
      padding: 0 8px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      transition: 0.3s;
    }
    p:hover {
      background: $nav_hover;
      color: $yellow;
    }
  }
  .line {
    z-index: 99;
    position: absolute;
    height: 1px;
    width: 100%;
    top: 30px;
    // left: 20px;
    // background: $yellow;
  }
}
.not-home-nav {
  li:hover {
    span,
    i {
      color: $blue;
    }
  }
  .sec-nav {
    background: $white;
    box-shadow: 0px 2px 4px 0px rgba(231, 238, 244, 1);
    p:hover {
      background: none;
      color: $blue;
    }
  }
}
</style>
